<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>所有车位实时信息</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript" src="./js/axios.js"></script>
    <style>
        .parking-space {
            width: 160px;
            height: 160px;
        }

        .locked {
            background: red;
        }

        .unlocked {
            background: green;
        }
    </style>
</head>
<body>
<main id="app">
    <table>
        <h3>所有车位实时信息</h3>
        <!--表格行数由parkingSpaceList长度决定，当length能被4整除则行数为length/4，否则为length/4 注意v-for遍历数字从1开-->
        <tr v-for="i in parkingSpaceList.length % 4 == 0? parkingSpaceList.length/4+1 : parkingSpaceList.length/4+2">
            <td v-for="(item, index) in parkingSpaceList.slice(4*(i-1), 4*(i-1) + 4)"><!--一行显示四个单元格-->
                <div class="parking-space" v-bind:class="item.locked?'locked':'unlocked'">
                    车位编号：<strong>{{item.id}}</strong><br/>
                    是否锁定：<strong>{{item.locked}}</strong><br/>
                    启用时间：<strong>{{item.startTime}}</strong><br/>
                    车位状态：<strong>{{item.status}}</strong><br/>
                </div>
            <td/>
        </tr>
    </table>
    <hr/>
    <a href="reservation.html" target="_blank">预约/缴费页面</a><br/>
    <a href="path.html" target="_blank">车位导航页面</a><br/>
    <a href="login.html" target="_blank">管理员登录页面</a>
</main>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            parkingSpaceList: []
        },
        methods: {
            findAll: function () {
                var that = this;
                axios.get("http://localhost:8080/park").then(
                    function (response) {
                        that.parkingSpaceList = response.data;
                    },
                    function (err) {
                        console.log(err);
                    }
                );
            }
        }
    });
    window.onload = function () {
        app.findAll();
    };

    //使用websocket显示实时车位信息
    var websocket = null;
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:8080/ws/park");
    } else {
        alert("浏览器不支持websocket");
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        console.log("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        console.log("WebSocket连接成功");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        console.log(event.data);
        var jsonObj = JSON.parse(event.data);//把接收的json字符串转为对象
        app.parkingSpaceList.splice(jsonObj.id - 1, 1, jsonObj);//修改数组值要用splice，这里表示将索引为1开始的一个元素修修改为response.data
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        console.log("WebSocket连接关闭");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        websocket.close();
    }

    //发送消息
    // function send() {
    //     var message = document.getElementById('text').value;
    //     websocket.send(message);
    // }
</script>
</body>
</html>